<!--
*@Author: QWP
*@Description: 群成员查看
*@Date: 2024-07-11 13:35:40
-->
<template>
  <u-collapsed-sider width="200px"
    :canExpand="false"
    style="box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.2);">
    <a-layout class="f-h-100 u-chat-group-user-list">
      <a-layout-header class="f-h-auto" style="padding: 20px 14px 14px; background-color: #fff; line-height: 36px;">
        <a-input v-model:value="searchValue" 
          id="u-user-search-input"
          placeholder="搜索"
          @change="filterList" 
          @focus="isFocus = false" 
          @blur="isFocus = true">
        </a-input>
        <!-- <label for="u-user-search-input" class="u-search-input-label" v-if="isFocus && !searchValue" >
          <a-space @click="isFocus = true">
            <SearchOutlined />
            <span>搜索</span>
          </a-space>
        </label> -->
      </a-layout-header>
      <a-layout-content class="s-bg-white"
        style="overflow: auto;">
        <a-list :data-source="userList">
          <template #renderItem="{ item }">
            <a-list-item
              :class="{'u-chat-current': curentGroup == item.userId}"
              @click="currentClick(item)">
              <a-row align="middle" 
                justify="space-between" 
                class="f-user-item f-w-100" >
                <a-space>
                  <!-- <a-image :src="item.img" :preview="false" style="width: 32px; height: 32px; border-radius: 2px;"></a-image> -->
                  <a-avatar size="small" style="background-color: #f56a00">
                    {{ item.username[0] }}
                  </a-avatar>
                  <div class="f-flex-column">
                    <span class="u-group-name" >{{ item.username }}</span>
                  </div>
                </a-space>
              </a-row>
            </a-list-item>
          </template>
        </a-list>
      </a-layout-content>
      <!-- <a-layout-footer style="padding: 14px; background-color: #fff">
        <a-row justify="center">
          <a-button danger style="width: 80%;">解散群聊</a-button>
        </a-row>
      </a-layout-footer> -->
    </a-layout>
  </u-collapsed-sider>
</template>

<script lang='ts' setup>
import { ref, reactive, computed, onMounted } from 'vue' 
import { useRoute, useRouter } from 'vue-router'
import { urlFile } from '@/util/common'
import { chatEventBus } from '@/util/eventBus'
import { cloneDeep } from 'lodash'

interface Props {
  current?: any
}
defineProps<Props>()

const searchValue = ref<string>('');
const isFocus = ref<boolean>(true);

// 选中的聊天
const curentGroup = ref<string>('')

const emits = defineEmits(['click'])

onMounted(() => {
  initUserData();
})

const originList: Array<any> = ref([])
const userList: Array<any> = ref([])
// 初始化聊天数据
const initUserData = () => {
  chatEventBus.on('userList', (data) => {
    originList.value = data;
    userList.value = data;
  })
}

// 点击事件
const currentClick = (data) => {
  curentGroup.value = data.userId;
  emits('click', data)
}

// 人员筛选
const filterList = (e) => {
  userList.value = cloneDeep(originList.value).filter(item => item.username.includes(searchValue.value.trim()))
}

</script>

<style lang='scss'>
.u-chat-group-user-list {
  #u-user-search-input {
    position: relative;
    background-color: #F2F2F2;
    &:focus {
      background-color: #fff;
    }
  }
  .u-search-input-label{
    position: absolute;
    z-index: 1;
    left: 50%;
    transform: translateX(-50%);
    color: #999999;
  }
  .ant-list-item {
    padding: 12px 12px;
    cursor: pointer;
    .f-user-item {
      .u-group-name {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 16px;
        color: #000000;
        line-height: 20px;
      }
    }
  }
}
</style>